

<template>
    <div class="mb-4 border  p-4 rounded-sm border-gray-100">
        <p class="mb-4">商品统计</p>
        <div class="flex items-center  justify-between text-gray-400 px-4  ">
            <div class="bg-gray-50  rounded-sm px-6 py-4  w-1/5">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <div class="flex items-center justify-between gap-3">
                        <el-icon class="text-2xl bg-gray-400 rounded-full" color="#fff">
                            <Download />
                        </el-icon>
                        <span>下载的产品</span>
                    </div>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="flex items-center justify-between ">
                    <span class="text-sky-400 text-2xl">3</span>
                    <div class="border text-sm rounded-sm p-1">筛选无货商品</div>
                </div>
            </div>
            <div class="bg-gray-50  rounded-sm px-6 py-4  w-1/5">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <div class="flex items-center justify-between gap-3">
                        <i
                            class="iconfont icon-changjia  w-5 h-5 text-center  text-2xl bg-gray-400 text-white rounded-full"></i>
                        <span>关注的厂家</span>
                    </div>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>

                </div>
                <div class="flex items-center justify-between ">
                    <span class="text-red-400 text-2xl">--</span>
                    <div class="border text-sm rounded-sm p-1">筛选无货商品</div>
                </div>
            </div>
            <div class="bg-gray-50  rounded-sm px-6 py-4  w-1/5">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <div class="flex items-center justify-between gap-3">
                        <i
                            class="iconfont icon-guanzhu1  w-5 h-5 text-center  bg-gray-400 text-white text-2xl  rounded-full"></i>
                        <span>收藏的产品</span>
                    </div>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="flex items-center justify-between ">
                    <span class="text-sky-400 text-2xl">2</span>
                    <div class="border text-sm rounded-sm p-1">筛选无货商品</div>
                </div>
            </div>
            <div class="bg-gray-50  rounded-sm px-6 py-4  w-1/5">
                <div class="flex items-center justify-between gap-2 mb-4">
                    <div class="flex items-center justify-between gap-3">
                        <i
                            class="iconfont icon-dianpu1  w-5 h-5 text-center bg-gray-400 text-white  text-2xl  rounded-full"></i>
                        <span>店铺商品</span>
                    </div>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
                <div class="flex items-center justify-between ">
                    <span class="text-red-400 text-2xl">--</span>
                    <div class="border text-sm rounded-sm p-1">筛选无货商品</div>
                </div>
            </div>

        </div>
    </div>
    <!-- 产品推荐 -->
    <div class="mb-4 border  p-4 rounded-sm border-gray-100">
        <div class="flex items-center justify-between  bg-gray-100 px-1 py-4">
            <span>明星店铺推荐产品</span>
            <div class="flex gap-4 text-gray-400 px-4">
                <div class="flex items-center justify-between gap-1 hover:cursor-pointer">
                    <el-icon>
                        <RefreshRight />
                    </el-icon>
                    <button @click="updateStar" class="hover:cursor-pointer">换一组</button>
                </div>
                <button>查看更多</button>
            </div>
        </div>
        <!-- 产品列表 -->
        <div class="grid grid-cols-6 gap-6 px-2 py-4">
            <div v-for="(product, index) in products" :key="index"
                class="bg-white rounded-lg shadow-sm overflow-hidden hover:border-orange-500 hover:border">
                <div class="relative">
                    <a :href="`/productDetails/${product.id}`" target="_blank">
                        <div class="groom" v-if="product.recommend"></div>
                        <img :src="product.image" :alt="product.name" class="w-full aspect-square object-cover" />
                    </a>
                </div>
                <div class="p-4">
                    <a href="#" target="_blank">
                        <h3 class="text-sm text-gray-800">{{ product.name }}</h3>
                        <p class="text-gray-400 text-xs mb-2 mt-1">
                            {{ product.description }}
                        </p>
                    </a>
                    <div class="mt-2 flex items-center justify-between">
                        <span class="text-orange-500 text-lg font-medium">¥{{ product.price }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 新款推荐 -->
    <div class="mb-4 border  px-4 rounded-sm border-gray-100">
        <div class="flex items-center justify-between  px-1 py-4">
            <div class="flex items-center justify-between gap-2">
                <p>新款动态</p>
                <span class="text-red-400 text-[13px]">推荐和关注厂家上传的款式</span>
            </div>
            <button class="text-gray-400 ml-2">查看更多</button>
        </div>
        <!-- 关注商家的产品动态 -->
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane v-for="shop in starShops" :label="shop.name" :key="shop.id" :name="shop.name">
                <!-- 商品列表 -->
                <div class="grid grid-cols-6 gap-6">
                    <div v-for="(product, index) in starShopProducts" :key="index"
                        class="bg-white rounded-lg shadow-sm overflow-hidden hover:border-orange-500 hover:border">
                        <div class="relative">
                            <a :href="`/productDetails/${product.id}`" target="_blank">
                                <div class="groom" v-if="product.recommend"></div>
                                <img :src="product.image" :alt="product.name"
                                    class="w-full aspect-square object-cover" />
                            </a>
                        </div>
                        <div class="p-4">
                            <a href="#" target="_blank">
                                <h3 class="text-sm text-gray-400">{{ product.name }}</h3>
                            </a>
                            <div class="mt-2 flex items-center justify-between">
                                <span class="text-red-500 text-base font-medium">¥{{ product.price }}</span>
                            </div>
                            <div class="mt-2 flex items-center justify-between">
                                <span class="text-red-500 text-base ">首发：{{ product.publishDate }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>

</template>

<script setup>
import { ref, onMounted, watch } from "vue";
//加载json模拟数据
import loadLocalJson from "@/https/local/localJson.js";
//明星商品信息
const products = ref();
//todo 获取商品数据的方法
const getProductList = async () => {
    //获取主页产品数据
    await loadLocalJson("json/downloadManage/starProduct.json").then((res) => {
        products.value = res.data.products;
    });
};
//关注的商家
const starShops = ref([
    {id:1,name:"朵丽鞋业"},
    { id: 2, name:"艾令熊鞋业"},
]);
const  starShopProducts = ref([]);
const activeName = ref(starShops.value[0].name);
const handleTabClick = (tab) => {
    console.log(tab);
    getShopProductList(tab.name);
};
//  获取商家的关注商家的上新的产品
const getShopProductList = async (shopId) => {
    //获取主页产品数据
    await loadLocalJson("json/downloadManage/starProduct2.json").then((res) => {
        starShopProducts.value = res.data.products;
    });
};

//todo 更新明星店铺推荐产品
const updateStar =()=>{
    console.log("更新明星店铺推荐产品");
}
onMounted(() => {
    getProductList();
    getShopProductList(starShops.value[0].id);
});
</script>

<style scoped>

</style>